import React, { useState } from 'react';
import { Breadcrumb } from 'antd'
import { Link, useLocation } from 'umi'
import { useMount } from 'ahooks';
// import styles from './index.less'
export interface IMyBreadcrumbProps {
}

export function MyBreadcrumb (props: IMyBreadcrumbProps) {
  const [ title, setTitle ] = useState('')
  const [ subTitle, setSubTitle ] = useState('')
  const { pathname } = useLocation()
  const breadcrumbList: any = { // 定义规则
    '/banner/index': {
      title: '轮播图',
      subTitle: '轮播图管理'
    },
    '/banner/list': {
      title: '轮播图',
      subTitle: '轮播图列表'
    },
    '/list/shop': {
      title: '商品管理',
      subTitle: '产品列表'
    },
    '/list/recommend': {
      title: '商品管理',
      subTitle: '推荐列表'
    },
    '/list/seckill': {
      title: '商品管理',
      subTitle: '秒杀列表'
    },
    '/people/admin': {
      title: '人员管理',
      subTitle: '管理员列表'
    },
    '/people/user': {
      title: '人员管理',
      subTitle: '用户管理'
    }
  }
  useMount(() => { // 处理当前的路由
    for(var key in breadcrumbList) {
      if (key === pathname) {
        setTitle(breadcrumbList[key].title)
        setSubTitle(breadcrumbList[key].subTitle)
      }
    }
  })
  return (
    <Breadcrumb>
      <Breadcrumb.Item>
        <Link to="/home">首页</Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        { title }
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <a href="">{ subTitle }</a>
      </Breadcrumb.Item>
    </Breadcrumb>
  );
}
